<template>
  <div :class="{ 'has-logo': showLogo }"
       :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
    <logo v-if="showLogo" :collapse="isCollapse"/>
    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
      <el-menu
          :default-active="'1'"
          :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
          :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
          :unique-opened="false"
          :active-text-color="theme"
          :collapse-transition="false"
          mode="vertical"
          @select="handleMenuSelect"
      >
        <!--        <router-link to="/iots">-->
        <el-menu-item index="/iots">
          <template #title>
            <svg-icon icon-class="dashboard"/>
            <span class="menu-title">主页</span>
          </template>
        </el-menu-item>
        <!--        </router-link>-->
        <!--        <router-link to="/visual">-->
        <el-menu-item index="/visual">
          <svg-icon icon-class="dashboard"/>
          <template #title>
            <span class="menu-title">可视化</span>
          </template>
        </el-menu-item>
        <!--        </router-link>-->

        <el-sub-menu index="/iots/area-devices/1">
          <template #title>
            <div @click.stop="handleSelectMenu('1')">
              <el-icon><location /></el-icon>
              <span class="menu-title">客厅</span>
            </div>
          </template>
          <el-menu-item index="/iots/area-devices/11" @click.native="handleSelectMenu('11')">
            <template #title>
              <svg-icon icon-class="dashboard"/>
              <span class="menu-title">卫生间</span>
            </template>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/iots/area-devices/2">
          <template #title>
            <div @click.stop="handleSelectMenu('2')">
              <el-icon><location /></el-icon>
              <span class="menu-title">书房</span>
            </div>
          </template>
          <el-menu-item index="/iots/area-devices/22">
            <template #title>
              <div @click.stop="handleSelectMenu('22')" >
                <el-icon><location /></el-icon>
                <span class="menu-title">卫生间</span>
              </div>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <!--        <sidebar-item-->
        <!--            v-for="(route, index) in sidebarRouters"-->
        <!--            :key="route.id"-->
        <!--            :item="route"-->
        <!--            :base-path="route.id.toString()"-->
        <!--        />-->
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup name="iots-sidebar">
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore, {loadView} from '@/store/modules/permission'
import {useRoute, useRouter} from "vue-router";
import {computed, onMounted, reactive, ref, watch} from "vue";
import {getAreaTree} from "@/api/iots/area";
import Layout from "@/layout";
import ParentView from "@/components/ParentView";
import InnerLink from "@/layout/components/InnerLink";

const route = useRoute();
const router = useRouter();
const appStore = useAppStore()
const settingsStore = useSettingsStore()
// const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
let sidebarRouters = ref([])
const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);
const isCollapse = computed(() => !appStore.sidebar.opened);

const activeMenu = computed(() => {
  const {meta, path} = route;
  // console.log(route)
  // if set path, the sidebar will highlight the path you set
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
})

const openeds = ['/iots/area-devices/1']
getAreaTree().then((res) => {
  sidebarRouters.value = [
    {
      id: 0,
      name: "主页",
      display_name: "主页",
      component: loadView("iots/index")
    },
    {
      id: 11110,
      name: "区域设备",
      display_name: "区域设备",
      component: loadView("iots/area-devices/1")
    }
  ]
  sidebarRouters.value.push(...filterAsyncRouter(res.data))
  console.log(sidebarRouters.value)
})

// 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap) {
  return asyncRouterMap.filter(route => {
    route.component = loadView("iots/areaDevices")
    if (route.children != null && route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    } else {
      delete route['children']
    }
    return true
  })
}

function handleSelectMenu(areaId) {
  console.log(areaId)
  router.push('/iots/area-devices/' + areaId)
}

function handleMenuSelect(index) {
  console.log("当前选中的菜单项索引是：" + index);
  // 在这里可以编写菜单项的点击事件处理逻辑
}

</script>
